<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/axios.min.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        function checkName(){
            //向服务器发送AJAX的GET请求
            //第一个参数为请求服务器的URL路径
            //第二个参数为请求参数，其中params表示表单数据
            // axios.get("/user/checkName",{
            //     params:{
            //         name:$("userName").value
            //     }
            // }).then(resp =>{//处理响应信息
            //     //得到响应信息消息体内容
            //     var info = resp.data;
            //     if(info == "no"){
            //         $("nameSpan").style.color = "red";
            //         $("nameSpan").innerHTML = "该用户名已存在";
            //     }
            //     else{
            //         $("nameSpan").style.color = "green";
            //         $("nameSpan").innerHTML = "可以使用";
            //     }
            // });

            let paramObj = new URLSearchParams();
            //添加表单数据
            paramObj.append("name",$("userName").value);
            axios.post("/user/checkName",paramObj).then(resp =>{
                //得到响应信息消息体内容
                    var info = resp.data;
                    if(info == "no"){
                        $("nameSpan").style.color = "red";
                        $("nameSpan").innerHTML = "该用户名已存在";
                    }
                    else{
                        $("nameSpan").style.color = "green";
                        $("nameSpan").innerHTML = "可以使用";
                    }
            })
        }

        function jump(){
            // axios.get("/test").then(resp =>{
            //     alert(resp.data);
            // })
            location.href="/test.html";
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="userName" onblur="checkName()">
          <span id="nameSpan"></span>
    <hr>
    <form action="/user/checkName">
        用户名：<input type="text" name="name"><br>
        <input type="submit" value="提交">
    </form>

    <input type="button" value="请服务器" onclick="jump()">
</body>
</html>